@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,400);
@import url(https://100dayscss.com/codepen/css/font-awesome.min.css);

$speed: 60s; // 60s for realtime 

html,body{
    height: 100%;
    margin: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

.frame{
    position: relative;
    width: 25rem;
    height: 25rem;
    background-color: #4c4c4c;
    border-radius: .125rem;
    box-shadow: .0625rem .125rem .625rem rgba(0,0,0,0.3);
    color: #fff;
    text-transform: uppercase;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: .75rem;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center{
    position: absolute;
    width: 13.25rem;
    height: 13.25rem;
    top: 5.4375rem;
    left: 5.4375rem;
    background-color: #242424;
    border: .4375rem solid #3a3a3a;
    border-radius: 50%;
    text-align: center;
}

.date{
    position: absolute;
    top: 4.25rem;
    width: 100%;
}

.time{
    position: absolute;
    font-size: 2.5rem;
    top: 5rem;
    font-weight: 700;
    width: 100%;
    margin: .25rem 0;
}

.beat{
    position: absolute;
    top: 8.0625rem;
    left: 3.5625rem;

    span{
        color: #f85b5b;
        font-size: .625rem;
        float: left;
        margin-top: .0625rem;
        margin-right: .25rem;
        animation: beat .9s ease-in-out infinite;
    }
}

.energy{
    position: absolute;
    top: 8.0625rem;
    right: 3.4375rem;
}

@for $i from 1 through 15{
    .pointer-set-#{$i}{
        position: absolute;
        height: 11.75rem;
        width: 11.75rem;
        top: .75rem;
        left: .75rem;
        transform: rotate(($i - 1) * 6+deg);

        .point-1{
            position: absolute;
            width: .125rem;
            height: .125rem;
            background-color: #d3d3d3;
            top: 0;
            left: 5.8125rem;
        }

        .point-2{
            @extend .point-1;
            top: 5.8125rem;
            left: 11.625rem;
        }

        .point-3{
            @extend .point-1;
            top: 11.625rem;
        }

        .point-4{
            @extend .point-2;
            left: 0;
        }
    }
}

.spinner{
    position: absolute;
    width: 12.625rem;
    height: 12.625rem;
    top: .3125rem;
    left: .3125rem;
    border-radius: 50%;
    animation: spinner $speed linear infinite;
    circle{
        stroke: #F85B5B;
        stroke-width: 3;
        fill: none;
        stroke-dasharray: 625;
    }
}

@keyframes spinner {
    0%{
        stroke-dashoffset: 625;
        transform: rotate(-90deg) scaleY(1);
    }
    50%{
        stroke-dashoffset: 0;
        transform: rotate(-90deg) scaleY(1);
    }
    50.001%{
        transform:rotate(-90deg) scaleY(-1);
    }
    100%{
        stroke-dashoffset: 625;
        transform: rotate(-90deg) scaleY(-1);
    }
}

@keyframes beat {
    0%{
        transform: scale(1);
    }
    35%{
        transform: scale(1.2);
    }
}